<#import "/layout.html" as c>
    <#import "/list_layout.html" as list>
        <#assign alertList = []/>
        <#assign alertList = alertList + ["这里是微信公众号管理界面。"]/>
        <#assign alertList = alertList + ["这里是微信公众号管理界面这里是微信公众号管理界面。"]/>
        <@c.html title="Index">
        <link href="${cssRoot}wx.css" rel="stylesheet"/>
        <@list.html title="微信公众号" subTitle="微信公众号管理" alertList=alertList permi="sys:wxaccount:save" addBtn=true searchHint="请输入微信号进行精确搜索">
    </@list.html>
    <!-- 开始新增微信公众号模态框 -->
    <div class="modal fade" id="addModal" tabindex="-1" role="dialog">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                    <h4 class="modal-title"> 新增微信公众号 <a class="btn btn-info btn-xs m-l-10" role="button" data-toggle="collapse" href="#OperationTipsAdd" aria-expanded="false" title="操作提示"> <i class="fa fa-exclamation"></i> &nbsp;提示 </a> </h4>
                </div>
                <div class="modal-body">
                    <ul class="collapse text-info m-b-20 p-l-15" role="tabpanel" id="OperationTipsAdd">
                        <li class="m-b-10">请从微信公众平台获取如下信息并全部准确填写</li>
                        <li class="m-b-10">Token是自己定义的一个字符串，必须为英文或数字，长度在3到32个字符，设置好后请在微信公众号后台设置同样的Token值，使二者保持一致即可</li>
                    </ul>
                    <form id="addForm" action="${adminRoot}wxaccount/json/add" method="post"
                          data-parsley-validate="true">
                        <div class="form-group">
                            <label class="control-label">公众号名称<i class="f-s-14 text-danger">*</i> &nbsp;: </label>
                            <input id="name" type="text" name="name" class="form-control" placeholder="请输入微信公众号的名称"
                                   data-parsley-required="true" data-parsley-required-message="请填写微信公众号名称"
                                   data-parsley-maxlength="100"
                            />
                        </div>
                        <div class="form-group">
                            <label class="control-label">原始名称<i class="f-s-14 text-danger">*</i> &nbsp;: </label>
                            <input id="oriName" type="text" name="oriName" class="form-control" placeholder="请输入微信公众号的原始名称"
                                   data-parsley-required="true" data-parsley-required-message="请填写微信公众号原始名称"
                                   data-parsley-maxlength="100"
                            />
                        </div>
                        <div class="form-group">
                            <label class="control-label">微信号<i class="f-s-14 text-danger">*</i> &nbsp;: </label>
                            <input id="account" type="text" name="account" class="form-control" placeholder="请输入微信公众号的微信号"
                                   data-parsley-required="true" data-parsley-required-message="请填写微信公众号的微信号"
                                   data-parsley-maxlength="100"
                            />
                        </div>
                        <div class="form-group">
                            <label class="control-label">公众号APPID<i class="f-s-14 text-danger">*</i> &nbsp;: </label>
                            <input id="appid" type="text" name="appid" class="form-control" placeholder="请输入微信公众号的APP ID"
                                   data-parsley-required="true" data-parsley-required-message="请填写微信公众号的APP ID"
                                   data-parsley-maxlength="100"
                            />
                        </div>
                        <div class="form-group">
                            <label class="control-label">公众号APPSECRET<i class="f-s-14 text-danger">*</i> &nbsp;: </label>
                            <input id="appsecret" type="text" name="appsecret" class="form-control" placeholder="请输入微信公众号的APP SECRET"
                                   data-parsley-required="true" data-parsley-required-message="请填写微信公众号的APP SECRET"
                                   data-parsley-maxlength="100"
                            />
                        </div>
                        <div class="form-group">
                            <label class="control-label">公众号Token<i class="f-s-14 text-danger">*</i> &nbsp;: </label>
                            <input id="token" type="text" name="token" class="form-control" placeholder="请输入微信公众号的Token"
                                   data-parsley-required="true" data-parsley-required-message="请填写微信公众号的Token"
                                   data-parsley-maxlength="100"
                            />
                        </div>
                    </form>
                </div>
                <div class="modal-footer">
                    <a href="javascript:;" class="btn btn-white" data-dismiss="modal">放弃操作</a>
                    <a href="javascript:;" class="btn btn-primary" data-loading -text="Loading..."
                       nc-ajax-submit-target="addForm" nc-ajax-submit>确认提交</a>
                </div>
            </div>
        </div>
    </div>
    <!-- 结束新增微信公众号模态框 -->

    <!-- 开始修改微信公众号模态框 -->
    <div class="modal fade" id="editModal" tabindex="-1" role="dialog">
        <div class="modal-dialog">
            <div id="editContent" class="modal-content" >
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                    <h4 class="modal-title"> 编辑微信公众号 <a class="btn btn-info btn-xs m-l-10" role="button" data-toggle="collapse" href="#OperationTipsEdit" aria-expanded="false" title="操作提示"> <i class="fa fa-exclamation"></i> &nbsp;提示 </a> </h4>
                </div>
                <div class="modal-body">
                    <ul class="collapse text-info m-b-20 p-l-15" role="tabpanel" id="OperationTipsEdit">
                        <li class="m-b-10">请从微信公众平台获取如下信息并全部准确填写</li>
                        <li class="m-b-10">Token是自己定义的一个字符串，必须为英文或数字，长度在3到32个字符，设置好后请在微信公众号后台设置同样的Token值，使二者保持一致即可</li>
                    </ul>
                    <form id="editForm" name="alipayEditForm" action="${adminRoot}wxaccount/json/save" method="post"
                          data-parsley-validate="true">
                        <input id="editWxId" type="hidden" name="id"/>

                        <div class="form-group">
                            <label class="control-label">公众号名称<i class="f-s-14 text-danger">*</i> &nbsp;: </label>
                            <input id="editWxName" type="text" name="name" class="form-control" placeholder="请输入微信公众号的名称"
                                   data-parsley-required="true" data-parsley-required-message="请填写微信公众号名称"
                                   data-parsley-maxlength="100"
                            />
                        </div>
                        <div class="form-group">
                            <label class="control-label">原始名称<i class="f-s-14 text-danger">*</i> &nbsp;: </label>
                            <input id="editWxOriName" type="text" name="oriName" class="form-control" placeholder="请输入微信公众号的原始名称"
                                   data-parsley-required="true" data-parsley-required-message="请填写微信公众号原始名称"
                                   data-parsley-maxlength="100"
                            />
                        </div>
                        <div class="form-group">
                            <label class="control-label">微信号<i class="f-s-14 text-danger">*</i> &nbsp;: </label>
                            <input id="editWxAccount" type="text" name="account" class="form-control" placeholder="请输入微信公众号的微信号"
                                   data-parsley-required="true" data-parsley-required-message="请填写微信公众号的微信号"
                                   data-parsley-maxlength="100"
                            />
                        </div>
                        <div class="form-group">
                            <label class="control-label">公众号APPID<i class="f-s-14 text-danger">*</i> &nbsp;: </label>
                            <input id="editWxAppid" type="text" name="appid" class="form-control" placeholder="请输入微信公众号的APP ID"
                                   data-parsley-required="true" data-parsley-required-message="请填写微信公众号的APP ID"
                                   data-parsley-maxlength="100"
                            />
                        </div>
                        <div class="form-group">
                            <label class="control-label">公众号APPSECRET<i class="f-s-14 text-danger">*</i> &nbsp;: </label>
                            <input id="editWxSecret" type="text" name="appsecret" class="form-control" placeholder="请输入微信公众号的APP SECRET"
                                   data-parsley-required="true" data-parsley-required-message="请填写微信公众号的APP SECRET"
                                   data-parsley-maxlength="100"
                            />
                        </div>
                        <div class="form-group">
                            <label class="control-label">公众号Token<i class="f-s-14 text-danger">*</i> &nbsp;: </label>
                            <input id="editWxToken" type="text" name="token" class="form-control" placeholder="请输入微信公众号的Token"
                                   data-parsley-required="true" data-parsley-required-message="请填写微信公众号的Token"
                                   data-parsley-maxlength="100"
                            />
                        </div>
                    </form>
                </div>
                <div class="modal-footer">
                    <a href="javascript:;" class="btn btn-white" data-dismiss="modal">放弃操作</a>
                    <a href="javascript:;" class="btn btn-primary" data-loading -text="Loading..."
                       nc-ajax-submit-target="editForm" nc-ajax-submit>确认提交</a>
                </div>
            </div>
        </div>
    </div>
    <!-- 结束修改微信公众号模态框 -->

    <!-- 开始编辑公众号自定义一级菜单模态框 -->
    <div class="modal fade" id="menuModal" tabindex="-1" role="dialog">
        <div class="modal-dialog">
            <div id="menuContent" class="modal-content" >
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                    <h4 class="modal-title"> 编辑“<span id="tipWxName"></span>”自定义菜单按钮<span id="buttonNum"></span> <a class="btn btn-info btn-xs m-l-10" role="button" data-toggle="collapse" href="#OperationTipsMenu" aria-expanded="false" title="操作提示"> <i class="fa fa-exclamation"></i> &nbsp;提示 </a></h4>
                </div>
                <div class="modal-body">
                    <ul class="collapse text-info m-b-20 p-l-15" role="tabpanel" id="OperationTipsMenu">
                        <li class="m-b-10">公众号自定义菜单一级菜单最多有3个，可以设置为包含子菜单，子菜单最多有5个</li>
                        <li class="m-b-10">设置按钮点击访问的网址时请填写包括http://在内的完整的URL</li>
                        <li class="m-b-10">如果按钮名称为空则认为不使用该按钮</li>
                        <li class="m-b-10">确认提交后会将菜单信息保存在本地服务器并同步更新到微信公众号自定义菜单</li>
                    </ul>
                    <form id="menuForm" name="alipayEditForm" action="${adminRoot}wxmenu/json/edit" method="post"
                          data-parsley-validate="true">
                        <input id="editBtnWxId" type="hidden" name="btnWxId"/>
                        <input id="editBtnId" type="hidden" name="btnId"/>
                        <div class="form-group">
                            <label class="control-label">按钮名称 &nbsp;: </label>
                            <input id="editBtnName" type="text" name="btnName" class="form-control" placeholder="请输入按钮的名称"
                                   data-parsley-required="false" data-parsley-required-message="请输入按钮的名称" maxlength="4"
                            />
                        </div>
                        <div class="form-group">
                            <label class="control-label">按钮类型 &nbsp;:</label>
                            <div class="clearfix m-b-15">
                                <select class="form-control selectpicker" name="btnType" id="editBtnType" data-size="10" data-live-search="true" data-style="btn-white">
                                    <option value="subbtn">多级菜单</option>
                                    <option value="view">网页浏览</option>
                                    <option value="click">点击事件</option>
                                </select>
                            </div>
                        </div>
                        <div class="form-group" id="btnHandleUrlPanel">
                            <label class="control-label">链接地址<i class="f-s-14 text-danger">*</i>&nbsp;: </label>
                            <input id="editBtnUrl" type="text" name="btnUrl" class="form-control" placeholder="请输入链接地址"
                                   data-parsley-required="true" data-parsley-required-message="请输链接地址"/>
                        </div>
                        <div class="form-group" id="btnHandleClickPanel">
                            <label class="control-label">点击事件<i class="f-s-14 text-danger">*</i>&nbsp;: </label>
                            <div class="clearfix m-b-15" id="editBtnClickReply">
                                <select class="form-control selectpicker" name="btnClickReply" id="BtnClickReply"  data-parsley-required="true" data-size="10" data-live-search="true" data-style="btn-white"></select>
                            </div>
                        </div>
                        <div class="form-group" id="btnHandleSubbtnPanel" >
                            <a id="editBtnSub" href="#subButtonModal" data-no="one" class="m-r-10 btn btn-sm btn-success" data-tip="tooltip" data-toggle="modal" data-dismiss="modal" aria-hidden="true" data-tip="tooltip" data-placement="auto" data-original-title="点击该按钮跳转至编辑子菜单操作"><i class="fa fa-plus m-r-10"></i>编辑子菜单 </a>
                        </div>
                    </form>
                </div>
                <div class="modal-footer">
                    <a href="javascript:;" class="btn btn-white" data-dismiss="modal">放弃操作</a>
                    <a href="javascript:;" class="btn btn-primary" data-loading-text="Loading..." nc-ajax-submit-target="menuForm" nc-ajax-submit>确认提交</a>
                </div>
            </div>
        </div>
    </div>
    <!-- 结束编辑公众号自定义一级菜单模态框 -->

    <!-- 开始编辑公众号自定义子菜单模态框 -->
    <div class="modal fade" id="subButtonModal" tabindex="-1" role="dialog" data-close-click-backdrop-hide="true">
        <div class="modal-dialog modal-lg" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"> <span aria-hidden="true">&times;</span> </button>
                    <h4 class="modal-title">子菜单按钮编辑<a class="btn btn-info btn-xs m-l-10" role="button" data-toggle="collapse" href="#sideIconTips" aria-expanded="true" title="操作提示"> <i class="fa fa-exclamation"></i> &nbsp;提示 </a></h4>
                </div>
                <div class="modal-body p-b-0">
                    <ul class="text-info p-b-15 p-l-15 collapse in" role="tabpanel" id="sideIconTips">
                        <li class="m-b-3">点击 <span class="btn btn-xs btn-white"><i class="fa fa-plus"></i>添加新按钮</span> 按钮，增加新子菜单按钮，并在下方选定内容编辑选项处逐一根据提示说明输入及选择，完成后点击 <span class="btn btn-xs btn-success">保存设置</span> 按钮，子按钮至多添加5个。</li>
                        <li class="m-b-3 text-warning">编辑一个已有的子菜单按钮，需先选中后，再从下方进行内容修改，完成后点击 <span class="btn btn-xs btn-success">保存设置</span> 按钮。同样，若删除某个按钮，也需选中该按钮后点击 <span class="btn btn-xs btn-warning"><i class="fa fa-trash-o"></i></span> 按钮生效。通过拖拽可对选定内的内容块进行排序。</li>
                        <li class="m-b-3 text-primary">完成全部设置后，请务必先保存设置后再点击 <span class="btn btn-xs btn-primary">同步数据</span> 按钮，完成数据与微信服务器端的同步更新。</li>
                    </ul>
                    <div class="well ncdate-list">
                        <ul class="icon-tag clearfix" id="btnMenuListPanel">

                        </ul>
                        <button type="button" class="btn btn-sm btn-white" id="editSubBtnAdd"><i class="fa fa-plus m-r-5"></i>添加新按钮</button>
                    </div>
                    <legend class="pull-left width-full m-b-0">
                        <h5>选定内容编辑</h5>
                    </legend>
                    <form class="form-horizontal form-bordered p-0" autocomplete="off" method="post" data-parsley-validate="true" id="editSubBtnForm" data-parsley-excluded="">
                        <div class="form-group" >
                            <label class="control-label col-md-2 col-sm-3"> <span nc-handle-type-text>按钮名称</span><i class="f-s-14 text-danger">*</i> &nbsp;:</label>
                            <div class="col-md-9 col-sm-8">
                                <input type="text" id="editSubBtnName" class="form-control" placeholder="请输入该子菜单按钮名称"  data-tip="tooltip" data-placement="auto" data-original-title="必填项,所输入的文字内容不超过7个中文字符" data-parsley-required="true" maxlength="7">
                            </div>
                        </div>
                        <div class="form-group" >
                            <label class="control-label col-md-2 col-sm-3"> <span nc-handle-type-text>按钮类型</span><i class="f-s-14 text-danger">*</i> &nbsp;:</label>
                            <div class="col-md-9 col-sm-8">
                                <div class="col-md-3 p-l-0">
                                    <select class="form-control" name="linkType" id="editSubBtnType">
                                        <option value="view">网页浏览</option>
                                        <option value="click">点击事件</option>
                                    </select>
                                </div>
                                <div class="col-md-9 p-l-0">
                                    <div class="clearfix m-b-15" id="editSubBtnUrlPanel">
                                        <input id="editSubBtnUrl" type="text" name="subBtnUrl" class="form-control" placeholder="请输入链接地址"
                                           data-parsley-required="false" data-parsley-type="url" data-parsley-required-message="请输入链接地址"/>
                                    </div>
                                    <div class="clearfix m-b-15" id="editSubBtnClickReplyPanel" style="display: none;">
                                        <select class="form-control selectpicker" name="subBtnClickReply" id="subBtnClickReply" data-size="10" data-live-search="true" data-style="btn-white"></select>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </form>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-success" id="editSubBtnSave">保存设置</button>
                    <button type="button" class="btn btn-primary" id="editSubBtnUpdate">同步数据</button>
                </div>
            </div>
        </div>
    </div>
    <!-- 结束编辑公众号自定义子菜单模态框 -->

    <script src="${pluginsRoot}bootstrap-select/bootstrap-select.min.js"></script>
    <script src="${jsRoot}wx/accountlist.js"></script>
</@c.html>
